<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        select {
            width: 50px;
            float: right;
            margin-bottom: 20px;
        }

        div {
            margin: 50px auto;
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div>
        请选择省份：
        <select>
        </select><br><br>

        请选择地区:
        <select>
            <option></option>
            <option></option>
            <option></option>
            <option></option>
        </select><br><br>

        请选择具体地址：
        <select>
            <option></option>
            <option></option>
            <option></option>
            <option></option>
        </select>
    </div>
    <!-- 引入jQuery链接 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        // 第一个下拉列表
        $.ajax({
            type: "get",
            url: "http://localhost:3000/first",
            // 成功以后
            success(result) {
                let str = ``
                result.result.forEach(item => {
                    str += `<option value="${item.id}">${item.area_name}</option>`
                });
                $('select:eq(0)').html(str)

                $('select:eq(0)').change(function () {
                    let one = $(this).val()
                    // 天津
                    $.ajax({
                        type: 'get',
                        url: 'http//localhost:3000/second',
                        data: {
                            one
                        },
                        // 成功
                        success(result) {
                            let str = ``
                            result.result.forEach(item => {
                                str += `<option value="${item.id}">${item.area_name}</option>`
                            });
                            $("select:eq(1)").html(str);
                            // 第三个
                            $('select:eq(1)').change(function () {
                                let one = $(this).val()
                                // 天津
                                $.ajax({
                                    type: 'get',
                                    url: 'http//localhost:3000/third',
                                    data: {
                                        one
                                    },
                                    // 成功
                                    success(result) {
                                        let str = ``
                                        result.result.forEach(item => {
                                            str += `<option value="${item.id}">${item.area_name}</option>`
                                        });
                                        $("select:eq(2)").html(str);
                                        // 第三个

                                    }
                                })
                            })
                        }
                    })
                })
            }
        })
    </script>
</body>

</html>